<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="icon" href="">
  <meta charset="UTF-8">
  <title>ejs</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
  <style>
    .fa {
      color: black;
      font-size: 18px;
      display: none;
    }

    .table tr td {
      text-align: center;
      vertical-align: middle
    }

    .table th {
      text-align: center;
      vertical-align: middle
    }

    table {
      width: 100%;
    }
  </style>
</head>


<body>

  <div class="container max-width">
    <div class="tile is-ancestor">
      <div class="tile is-vertical is-12">
        <div class="tile">
          <div class="tile is-parent ">
            <article class="tile is-child notification is-primary">
              <p class="title">Faucet Monitor</p>
              <p class="subtitle">
              <div class="columns">
                <div class="column ">
                  目前我们的名单上有1963个faucet。仅显示本周至少付款一次的水龙头。在过去24小时内，这些水龙头总共向用户支付了约6800.58美元（见硬币排名）。
                  我们的机器人每5分钟自动更新一次这个列表，所以定期访问我们，寻找新的热水龙头，并获得更多免费加密。
                </div>

                <div class="column ">
                  <form action="/queryCondition" class="queryForm">
                    <input type="text" class="currency input is-primary" placeholder="name查询" name="name" style="width: 40%;">
                    <div class="select">
                      <select name="currencyName">
                        <option value=''>----请选择----</option>
                        <% currency_set.forEach((element) => {%>
                          <option value="<%=element%>"><%=element%></option>
                          <% });%>
                        
              
                      </select>
                    </div>
                    <button class="button is-link ml-3">查询</button>
                    <button class="button is-danger ml-3">清除</button>
                  </form>
                </div>
              </div>
              </p>
            </article>
          </div>
        </div>

      </div>

    </div>

    <table class="table  table table is-hoverable p-5 is-size-1-mobile">

      <thead style="text-align: center;vertical-align: middle;">
        <tr>
          <th colspan="2">Name</th>
          <th>Coin</th>
          <th style="width: 160px;">
            
            <span class="icon-text">
              <span>Last payment</span>
              <span class="icon">
                <a  class="last_payment-up" title="升序"> <i class="fas fa-sort-amount-up" aria-hidden="true"></i></a>
                <a href="/sort?sortName=last_payment&order=DESC" class="last_payment-down" title="降序"> <i class="fas fa-sort-amount-down" aria-hidden="true"></i></a>
              </span>
            </span>

          </th>
          <th>
            Balance
          </th>
          <th style="width: 120px;">
            <span class="icon-text">
              <span>Paid(1h)</span>
              <span class="icon">
                <a href="/sort?sortName=hour_paid&order=ASC" class="hour_paid-up" title="升序"> <i class="fas fa-sort-amount-up" aria-hidden="true"></i></a>
                <a href="/sort?sortName=last_payment&order=DESC" style='display:none' class="hour_paid-down" title="降序"> <i class="fas fa-sort-amount-down" aria-hidden="true"></i></a>
              </span>
            </span>

            
          </th>
          <th>
            <span class="icon-text">
              <span>Paid(24h)</span>
              <span class="icon">
                <a href="/sort?sortName=last_payment&order=ASC" class="daily_paid-up" title="升序"> <i class="fas fa-sort-amount-up" aria-hidden="true"></i></a>
                <a href="/sort?sortName=last_payment&order=DESC" style='display:none' class="daily_paid-down" title="降序"> <i class="fas fa-sort-amount-down" aria-hidden="true"></i></a>
              </span>
            </span>

          </th>
          <th>
            Created
          </th>
        </tr>
      </thead>
      <tbody>

        <% message.forEach((item,index)=> {%>

          <tr>
            <td>
              <%= index+1 %>
            </td>
            <td>
              <a href="/details/<%=item.id%>" class="">
                <%= item.name %>
              </a>
              <br>
              <a href="<%= item.url %> ">
                <%= item.url %>
              </a>
            </td>
            <td>
              <%= item.currency %>
            </td>
            <td>
              <%= item.lastPayment%>
            </td>
            <td>
              <%= item.balance %>
                <%= item.currency %>
            </td>
            <td>
              <%= item.paid_hour%>
                <%= item.currency %>
            </td>
            <td>
              <%= item.paid_day %>
                <%= item.currency %>
            </td>
            <td>
              <%= item.createTime %>
            </td>

          </tr>
          <% }); %>


      </tbody>
    </table>
    <div class="tags are-large">
      <span class="tag is-primary">总条数：<%=total%></span>
    </div>

    <nav class="pagination is-centered block" role="navigation" aria-label="pagination">
      <a class="pagination-previous start">首页</a>

      <a class="pagination-previous pre" <%=current_page==1?'disabled':''%> >
        上一页
      </a>
      <a class="pagination-next next" <%=page_total==current_page?'disabled':''%>>下一页</a>
      <a class="pagination-next last">末页</a>

      <ul class="pagination-list">

        <%for(let i=start-1;i<end;i++){%>
          <li>
            <a class="pagination-link <% if (i==current_page-1) { %>is-current<% } %>" aria-label="Goto page 1">
              <%=i+1%>
            </a>
          </li>
          <% }%>
      </ul>
    </nav>
    <div>
    </div>
  </div>


  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>
    $('.last_payment-down').hide()

    let index = (window.location.href).lastIndexOf('/')
    let paramter = (window.location.href).slice(index)
    paramter = paramter.split('?')[0] + "?"
    const sort = getQueryVariable("sortName")
    const name = getQueryVariable("name")
    const currency = getQueryVariable("currencyName")
    let order = getQueryVariable("order")
    const page = getQueryVariable("page")

    $(".queryForm").children('input')[0].value = name
    $(".queryForm").children('div').children('select')[0].value = currency
    let uri = paramter
    let href = '/sort?name='+name+'&currencyName='+currency
    $('.last_payment-up')[0].href = href +'&sortName=last_payment&order=ASC'
    $('.hour_paid-up')[0].href = href +'&sortName=hour_paid&order=ASC'
    $('.daily_paid-up')[0].href = href +'&sortName=daily_paid&order=ASC'

    if(sort&&order=='ASC'){
      $('.'+sort+'-up').hide()
      $('.'+sort+'-down')[0].href=href+'&sortName='+sort+'&order=DESC'
      $('.'+sort+'-down').show()
    }
    uri = name == '' ? uri : uri + '&name=' + name
    uri = currency == '' ? uri : uri + '&currencyName=' + currency
    $('.last_patment-up').href = href
    let lastpay= uri+'&sortName=last_payment&order=ASC'
    let hour_paid= uri+'&sortName=hour_paid&order=ASC'
    let daily_paid= uri+'&sortName=daily_paid&order=ASC'
    uri = sort == '' ? uri : uri + '&sortName=' + sort
    uri = order == '' ? uri : uri + '&order=' + order
    let end = 7 >= '<%=page_total%>' ? 7 : '<%=page_total%>'
    $('.start')[0].href = uri + '&page=1'
    $('.last')[0].href = uri + '&page=<%=page_total%>'
    $('.next')[0].href = uri + '&page=<%=Number(current_page)+1%>'
    $('.pre')[0].href = uri + '&page=<%=current_page-1%>'

      
    for (let i = 0; i < end; i++) {
      let item = $(".pagination-link")[i]
      let href = uri + "&page=" + Number(item.innerText)
      item.href = href
    }

    if (sort) {
      if (order == 'ASC')
        order = 'DESC'
      else if (order == 'DESC')
        order = 'NORMAL'
      else if (order == 'NORMAL')
        order = 'ASC'
    } else {
      order = 'ASC'
    }
   


    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
      }
      return ('');
    }


  </script>

</body>

</html>